<template>
  <basic-container>
    <div class="avue-crud__search">
      <div class="avue-form" style="width: 100%;">
        <form class="el-form">
          <div class="el-row" span="24">
            <div class="avue-group avue-group--header" index="0" active="1">
              <div role="tablist" aria-multiselectable="true" class="el-collapse">
                <div class="el-collapse-item is-active">
                  <div role="tab" aria-expanded="true" aria-controls="el-collapse-content-4400" aria-describedby="el-collapse-content-4400">
                    <div role="button" id="el-collapse-head-4400" tabindex="0" class="el-collapse-item__header is-active"><i class="el-collapse-item__arrow el-icon-arrow-right is-active"></i></div>
                  </div>
                  <div role="tabpanel" aria-labelledby="el-collapse-head-4400" id="el-collapse-content-4400" class="el-collapse-item__wrap">
                    <div class="el-collapse-item__content">
                      <div class="avue-form__group avue-form__group--flex">
                        <div class="el-col el-col-offset-0 el-col-xs-24 avue-form__row el-col-12" style="padding-left: 10px; padding-right: 10px;">
                          <div class="el-form-item el-form-item--feedback el-form-item--mini avue-form__item--"><label for="projectNo" class="el-form-item__label" style="width: 180px;">产品名称（产品编码）:</label>
                            <div class="el-form-item__content" style="margin-left:180px;">
                              <div class="el-tooltip el-input el-input--mini el-input--suffix avue-input" search="true" minwidth="120" sortable="sortable" span="6" gutter="20" labelwidth="180" aria-describedby="el-tooltip-3815" tabindex="0">
                                <el-select size="mini" filterable v-model="productId" placeholder="产品名称（产品编码）">
                                  <el-option v-for="item in productList" :key="item.value" :label="item.label" :value="item.value">
                                  </el-option>
                                </el-select>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="el-col el-col-12 avue-form__menu avue-form__menu--right" style="padding: 0px;">
                          <div class="el-form-item el-form-item--feedback el-form-item--mini">
                            <div class="el-form-item__content" style="margin-left: 0px;">
                              <button type="button" class="el-button el-button--primary el-button--mini" @click.stop='searchChange'>
                                <i class="el-icon-search"></i><span>搜 索</span>
                              </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <avue-crud class='demandTable' :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen" @selection-change="selectionChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuRight">
        <table-right :crud='$refs.crud' :data='data' :searchBtn='false' :columnBtn='true' :addPermission="permission.publiccraft_demand_add&&this.productId" :handleDelete="handleDelete" :delPermission="permission.publiccraft_demand_delete" :refreshChange='refreshChange'>
        </table-right>
      </template>
      <template slot-scope="{scope,row}" slot="menuForm">
        <el-button icon="el-icon-circle-plus" v-if="type=='add'" v-loading="goon" size="mini" plain type="primary" @click.stop="saveAndGoon()">保存并继续</el-button>
      </template>
      <template slot-scope="{row}" slot="productRqmId">{{row.productRqmName}}</template>
      <template slot-scope="{row}" slot="menu">
        <el-tooltip class="item" effect="dark" content="查看" placement="bottom">
          <el-button icon="el-icon-view" size="small" type="text" @click.stop="$refs.crud.rowView(row,row.$index)" v-if="permission.publiccraft_demand_view"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
          <el-button icon="el-icon-edit" size="small" type="text" @click.stop="$refs.crud.rowEdit(row,row.$index)" v-if="permission.publiccraft_demand_edit&&row.source=='2'"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button icon="el-icon-delete" size="small" type="text" @click.stop="rowDel(row)" v-if="permission.publiccraft_demand_delete&&row.source=='2'"></el-button>
        </el-tooltip>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getDemandList, addDemand, removeDemand, updateDemand, getDemand } from '@/api/project/productData/processData';
import { masterProducts } from '@/api/project/productData/product';
import { mapGetters } from 'vuex';
import { init } from '@/mixins/init';
export default {
  mixins: [init],
  data() {
    return {
      // procedureList: [],
      option: {
        dialogHeight: '100%',
        dialogWidth: '800',
        page: false,
        tip: false,
        border: true,
        index: true,
        indexLabel: '序号',
        selection: true,
        selectable: (row, index) => {
          return row.source == 2;
        },
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        menuWidth: 100,
        columnBtn: true,
        filterBtn: true,
        dialogClickModal: false,
        labelWidth: 100,
        column: [
          {
            label: '产品要求',
            prop: 'productRqmId',
            type: 'select',
            dicUrl: '/api/prodectrequirements/list',
            props: {
              label: 'name',
              value: 'id',
            },
            slot: true,
            span: 24,
            minWidth: 150,
            maxlength: 30,
            overHidden: true,
            rules: [
              {
                required: true,
                message: '请选择产品要求',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '要求内容描述',
            prop: 'productRqmContent',
            span: 24,
            minWidth: 200,
            maxlength: 50,
            overHidden: true,
          },
          {
            label: '备注',
            prop: 'remarks',
            type: 'textarea',
            span: 24,
            minWidth: 150,
            maxlength: 120,
            overHidden: true,
          },
        ],
      },
      data: [],
      productList: [],
      productId: '',
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['userInfo', 'permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.publiccraft_demand_add, false),
        viewBtn: this.vaildData(this.permission.publiccraft_demand_view, false),
        delBtn: this.vaildData(this.permission.publiccraft_demand_delete, false),
        editBtn: this.vaildData(this.permission.publiccraft_demand_edit, false),
      };
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    searchChange() {
      this.onLoad();
    },
    rowSave(row, done, loading) {
      row.productId = this.productId;
      addDemand(row).then(
        () => {
          if (this.goon) {
            loading();
            for (let key in this.$refs.crud.value) {
              this.$refs.crud.value[key] = null;
            }
            this.goon = false;
            this.onLoad();
          } else {
            this.onLoad();
            done();
          }
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        },
        (error) => {
          this.goon = false;
          window.console.log(error);
          loading();
        }
      );
    },
    // rowSave(row, done, loading) {
    //   row.productId = this.productId;
    //   addDemand(row).then(
    //     () => {
    //       this.onLoad();
    //       this.$message({
    //         type: 'success',
    //         message: '操作成功!',
    //       });
    //       done();
    //     },
    //     (error) => {
    //       window.console.log(error);
    //       loading();
    //     }
    //   );
    // },
    rowUpdate(row, index, done, loading) {
      updateDemand(row).then(
        () => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return removeDemand(row.id);
        })
        .then(() => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return removeDemand(this.ids);
        })
        .then(() => {
          this.onLoad();
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      this.type = type;
      if (['edit', 'view'].includes(type)) {
        getDemand(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    init() {
      masterProducts({ productType: 'PC' }).then((res) => {
        if (res.data.data.length == 0) {
          this.$message.error('请先维护产品信息');
          return;
        }
        this.productList = res.data.data.map((item) => {
          return {
            materialName: item.materialName,
            label: item.materialName + '(' + item.materialNo + ')',
            value: item.id,
          };
        });
        if (!this.productId) {
          this.productId = res.data.data[0].id;
        }
        this.onLoad();
      });
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.query.productId = this.productId;
      getDemandList(Object.assign(params, this.query)).then((res) => {
        const data = res.data.data;
        this.data = data;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style lang="scss">
</style>
